<template>
  <n-drawer :show="showHelpFile" :width="350" @mask-click="handleShow">
    <n-drawer-content title="帮助文档">
      <div v-for="(item, index) in fileNameList" :key="index" class="file">
        <n-button text tag="a" :href="`${VITE_FILE_LINK}${item}`" :target="targetType(item)">
          <template #icon>
            <n-icon>
              <component :is="getIcon(item)" />
            </n-icon>
          </template>
          {{ item }}
        </n-button>
      </div>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup lang="ts">
  import { NDrawer, NDrawerContent, NButton, NIcon } from 'naive-ui'
  import { useStore } from '@/store'
  import { computed, h, ref } from 'vue'
  import { FileOutlined, FileExcelOutlined, FilePdfOutlined, FileWordOutlined } from '@vicons/antd'

  const { VITE_FILE_LINK } = import.meta.env
  const store = useStore()
  const showHelpFile = computed(() => store.getters.showHelpFile)
  const fileNameList = ref([
    '支持快递公司.xlsx',
    '交易争议处理规范.pdf',
    '虚假交易细则.pdf',
    '表格导入批量发货要求及常见问题.pdf',
    '处理维权订单说明.pdf',
    '订单查询-操作文档.pdf',
    '订单结算及入账规则说明.pdf',
    '交易投诉运营规范2.0.pdf',
    '售后服务期及自动确认收货说明.pdf',
    '维权订单自动退款常见问题.pdf',
    '销售授权书.docx'
  ])

  function getFileType(fileName: string) {
    return fileName.split('.').pop()?.toLowerCase()
  }

  function targetType(fileName: string) {
    if (['docx', 'xlsx'].includes(getFileType(fileName))) {
      return '_self'
    } else {
      return '_blank'
    }
  }

  function getIcon(fileName: string) {
    const fileType = getFileType(fileName)
    let icon = FileOutlined
    switch (fileType) {
      case 'xlsx':
        icon = FileExcelOutlined
        break
      case 'pdf':
        icon = FilePdfOutlined
        break
      case 'docx':
        icon = FileWordOutlined
        break
      default:
        break
    }
    return h(icon)
  }

  function handleShow() {
    store.dispatch('app/handleHelpFileVisible', false)
  }
</script>

<style scoped lang="scss">
  .file {
    padding: 5px 0;
  }
</style>
